<template>
  <div class="breadcrumb-container">
    <div class="my-breadcrumb">
      <div class="breadcrumb-item home-item">
        <span>首页</span>
      </div>
      <div v-for="(item, index) in breadcrumbs" :key="index" class="breadcrumb-item-wrapper">
        <div class="separator">/</div>
        <div class="breadcrumb-item" :class="{ 'is-last': index === breadcrumbs.length - 1 }">
          <span>{{ item.meta.title }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const breadcrumbs = ref([]);


// 根据当前路由生成面包屑
const getBreadcrumb = () => {
  // 初始化面包屑导航数组
  const matched = route.matched.filter(
    item => item.meta && item.meta.title && item.path !== '/'
  );
  
  breadcrumbs.value = matched;
};

// 监听路由变化，更新面包屑
watch(
  () => route.path,
  () => {
    getBreadcrumb();
  },
  { immediate: true }
);
</script>

<style scoped>
.breadcrumb-container {
  padding: 0;
  background-color: transparent;
  display: flex;
  align-items: center;
  height: 60px;
}

.my-breadcrumb {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #606266;
  height: 100%;
}

.breadcrumb-item-wrapper {
  display: flex;
  align-items: center;
}

.breadcrumb-item {
  cursor: pointer;
  color: #606266;
  transition: color 0.3s;
}

.home-item {
  cursor: pointer;
  font-weight: normal;
  padding: 0 4px;
  display: flex;
  align-items: center;
  height: 100%;
}

.home-item:hover {
  color: #409eff;
  background-color: rgba(64, 158, 255, 0.1);
  border-radius: 4px;
}

.separator {
  margin: 0 8px;
  color: #c0c4cc;
}

.is-last {
  color: #409eff;
  font-weight: normal;
  cursor: default;
}
</style> 